<template>
  <div class="searchpopup">
    <!-- 弹出成页面 -->
    <!-- <button @click="$router.push('/home')">返回</button> -->
    <van-search
      v-model="searchValue"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <History-hot
      v-if="blockshow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagsearch="tagsearch"
    ></History-hot>
    <Search-tipsList
      v-else-if="blockshow == 2"
      :searchTipList="searchTipList"
      @listsearch="listsearch"
    ></Search-tipsList>
    <Search-pro
      v-else-if="blockshow == 3"
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @categoryVal="categoryVal"
      @pricechange="pricechange"
    ></Search-pro>
  </div>
</template>

<script>
import HistoryHot from "@/components/searchPopup/HistoryHot.vue";
import SearchPro from "@/components/searchPopup/SearchPro.vue";
import SearchTipsList from "@/components/searchPopup/SearchTipsList.vue";
import { searchpopupData, searchTipsData, searchListData } from "@/request/api";
export default {
  components: {
    HistoryHot,
    SearchPro,
    SearchTipsList,
  },
  data() {
    return {
      searchValue: "",
      placeholder: "",
      blockshow: 1,
      historyKeywordList: [],
      hotKeywordList: [],
      searchTipList: [],
      filterCategory: [],
      goodsList: [],
      order: "desc",
      categoryId: 0,
      sort: "id",
    };
  },
  created() {
    //等到滑动的动画结束之后，再发送请求
    setTimeout(() => {
      searchpopupData().then((res) => {
        console.log(res);
        //if在拦截器那里已经统一管理了 request
        // if (res.errno == 0) {
        this.placeholder = res.data.defaultKeyword.keyword;
        let { historyKeywordList, hotKeywordList } = res.data;
        console.log(historyKeywordList, hotKeywordList);
        this.historyKeywordList = res.data.historyKeywordList;
        this.hotKeywordList = res.data.hotKeywordList;
        // }else{
        //   console.log(res.errmsg)
        // }
      });
    }, 400);
  },
  mounted() {},
  methods: {
    //点击列表搜索
    listsearch(val) {
      console.log(val);
      this.searchValue = val;
      this.onSearch(this.searchValue);
    },
    //点击历史搜索
    tagsearch(val) {
      // console.log(val)
      this.searchValue = val;
      this.onSearch(this.searchValue);
    },
    //点击价格
    pricechange(val) {
      // console.log(val)
      this.order = val;
      this.sort = "price";
      this.onSearch(this.searchValue);
    },
    categoryVal(id) {
      //重新调用onSearch方法
      this.categoryId = id;
      this.onSearch(this.searchValue);
    },
    onSearch(val) {
      // console.log("确定搜索", val);
      //切到第三个页面
      this.blockshow = 3;
      searchListData({
        keyword: val,
        //请求数据，参数细化 把默认的加上去
        //显示页数
        page: 1,
        //一页显示个数
        size: 20,
        // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
        order: this.order,
        // 类别id，代表下拉菜单中的全部、居家等选项
        categoryId: this.categoryId,
        // 可以是id或price
        sort: this.sort,
      }).then((res) => {
        console.log(res);
        // 这里拿到的filterCategory数据和需求不一样，需要处理 数据属性的改造及渲染
        let newArr = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
        this.goodsList = res.data.goodsList;
      });
    },
    onCancel() {
      // console.log("取消搜索")
      this.$router.go(-1);
    },
    onInput(val) {
      this.blockshow = 2;
      // console.log(val)
      //发起数据请求，提示列表
      searchTipsData({
        keyword: val,
      }).then((res) => {
        // console.log(res.data)
        this.searchTipList = res.data;
      });
    },
  },
};
</script>

<style scoped lang="less">
.searchpopup {
  width: 100%;
  height: 100%;
  background-color: #eee;
  position: absolute;
  top: 0;
  z-index: 9;
}
</style>
